<template>
  <fieldset>
    <legend>评论列表</legend>
    <ul>
      <li v-for="item in commentList" :key="item.id">
        <b>评论内容:{{ item.content }}</b>
        <b class="nickname">发布者:{{ item.name }}</b>
        <b class="date">时间:{{ item.time }}</b>
        <button @click="del(item.id)">点击删除</button>
      </li>
    </ul>
    <Modal :visible="isShow" @on-confirm="confirm" @on-cancel="cancel">
      <h1 slot="tip">提示</h1>
      <h3 slot="content">您是否要删除这条内容?删除后不可恢复</h3>
    </Modal>
  </fieldset>
</template>
<script>
//删除逻辑
// 1.向服务器发起请求，携带需要被删除的那条信息的id
// 2.服务器响应之后，调用vuex的action方法，重新更新列表
// 3.通过封装的modal 添加交互效果
import { mapActions, mapState } from "vuex";
import { delComments } from "../../api/index";
import Modal from "@/components/modal";
export default {
  data() {
    return {
      isShow: false,
      currentId: "",
    };
  },
  computed: {
    ...mapState(["commentList"]),
  },
  components: {
    Modal,
  },
  methods: {
    confirm() {
      //点击确定，删除数据
      this.isShow = false;
      delComments(this.currentId).then((res) => {
        console.log(res);
        if (res.data.state) {
          //删除成功
          //更新列表
          this.GET_COMMENT_LIST();
        } else {
          alert("数据不存在，已经被删除");
        }
      });
    },
    cancel() {
      //取消按钮
      this.isShow = false; //关闭模态框
    },
    ...mapActions(["GET_COMMENT_LIST"]),
    del(id) {
      console.log(id);
      //打开模态框
      (this.isShow = true), (this.currentId = id);
    },
  },
  mounted() {
    this.GET_COMMENT_LIST();
  },
};
</script>
<style scoped>
body,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
  height: 500px;
  overflow-y: scroll;
}

fieldset {
  background: #ccc;
  margin-bottom: 20px;
}

li {
  background: #fff;
  height: 50px;
  line-height: 50px;
  /* width: 500px; */
  margin: 20px 0;
  border-radius: 10px;
}

li button {
  margin-left: 10%;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  background: hotpink;
  cursor: pointer;
  outline: none;
}

li button:hover {
  background: #f094c2;
}

b {
  margin: 0 100px;
}

b.nickname {
  color: deepskyblue;
}

b.date {
  color: hotpink;
}
</style>
